<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList" :show-loading-more-no-more-view="false">
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('addressbook.friend_apply.title')"></cl-navbar>
			<view class="searchview">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
		</template>
		<view :key="index" v-for="(item, index) in searchlist">
			<view class="listitem">
				<view class="listitem__centent">
					<view class="listitem__centent__left">
						<cl-avatar :src="item.requester_avatar_url" size="100rpx"></cl-avatar>
					</view>
					<view class="listitem__centent__right">
						<view class="listitem__centent__right__top">
							<text class="listitem__centent__right__top__nickname">{{item.requester_nick_name}}</text>
						</view>
						<view class="listitem__centent__right__content">
							<text class="listitem__centent__right__content__msg u-line-1">{{item.message}}</text>
						</view>
					</view>
				</view>
				<view class="listitem__controls" v-if="item.req_status == 'pending'">
					<text class="listitem__controls__shenhe" @click.stop="shenhe(item,'rejected')" style="color: #A74141;" >{{$t("addressbook.friend_apply.auditRejection")}}</text>
					<text class="listitem__controls__shenhe" @click.stop="shenhe(item,'accepted')" style="color: #3d9a57;">{{$t("addressbook.friend_apply.auditApprove")}}</text>
					<!-- <text class="listitem__controls__shenhe" v-else>{{$t("addressbook.friend_apply.examine")}}</text> -->
					
				</view>
				<view class="listitem__controls" v-else-if="item.req_status == 'accepted'">{{$t("addressbook.friend_apply.Agreed")}}</view>
				<view class="listitem__controls" v-else-if="item.req_status == 'rejected'">{{$t("addressbook.friend_apply.Declined")}}</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import friendsApi from "@/services/api/friends.js"
	export default {
		name: 'friend_apply',
		data() {
			return {
				indexList: [],
				// shenheItem:null,
				searchval:''
			}
		},
		onLoad() {
			// 监听操作
			uni.$on('onMessageFriendApp', this.onMessageFriendApp)
		},
		computed: {
			searchlist(){
				let newdata = this.indexList.filter(item => {
					// 根据名字筛选
					if (this.searchval && item.requester_nick_name.indexOf(this.searchval) === -1 && item.message.indexOf(this.searchval) === -1) {
						return false;
					}
					return true;
				});
				return newdata
			}
		},
		onUnload() {
			uni.$off('onMessageFriendApp', this.onMessageFriendApp)
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			onMessageFriendApp({type,data}){
				if(type == 'pending'){
					this.indexList.unshift({
						id: 63,
						requester_id: data.requester_id,
						requester_user_no: data.requester_user_no,
						requester_nick_name: data.requester_nick_name,
						requester_avatar_url: data.requester_avatar_url,
						recipient_id: data.recipient_id,
						message: data.message,
						req_status: "pending",
						create_time: Date.now()
					})
				}else{
					let index = this.indexList.findIndex(it=>it.id == data.apply_id)
					if(index != -1){
						this.indexList.splice(index,1)
					}
				}
			},
			// shenheZk(item){
			// 	console.log(111);
			// 	this.shenheItem = item
			// },
			async shenhe(item,status){
				try{
					let resapi = await friendsApi.auditing(item.id,item.requester_id,status)
					if(resapi){
						let index = this.indexList.findIndex(it=>it.id == item.id)
						if(index != -1){
							this.indexList.splice(index,1)
						}
						// this.shenheItem = null
						// item.req_status = status
					}
				}catch(e){
					//TODO handle the exception
				}
				
				console.log(item);
				console.log(status);
			},
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize);
				try {
					let res = await this.$api.friends.applyList({
						page: pageNo,
						limit: pageSize
					})
					if (res) {
						console.log(res.data.list);
						this.$refs.paging.complete(res.data.list)
					} else {
						this.$refs.paging.complete(false)
					}
				} catch (e) {
					this.$refs.paging.complete(false)
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}

	.listitem {
		display: flex;
		padding: 20rpx 30rpx 20rpx 30rpx;
		position: relative;
		align-items: center;
		justify-content: space-between;
		&__centent {
			display: flex;
			align-items: center;
			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}

					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
		&__controls{
			display: flex;
			// flex-direction: column;
			gap: 20rpx;
			// padding: 15rpx 0;
			// background: #2A2B3B;
			// border-radius: 30rpx;
			font-size: 25rpx;
			color: #6A6B76;
			// width: 128rpx;
			// text-align: center;
		}
	}
</style>